<template>
  <!-- 引入并使用自定义导航栏组件 -->
  <custom-navbar title="我的订单" show="true"></custom-navbar>
  <!-- 页面内容区域，确保内容不被导航栏遮挡 -->
  <scroll-view scroll-y="true" class="contentBox">
   	<view v-for="(item,index) in 10" :key="index" class="list-item" @click="toDetail">
		<view style="display: flex;flex-direction: row;justify-content: space-between;">
			<text>订单号：3834832484828482</text>
			<text style="color: gray;">待付款</text>
		</view>
		<view style="display: flex;flex-direction: row;margin-top: 20rpx;">
			<view style="height: 200rpx;width: 200rpx;background-color: lightgray;border-radius: 5rpx;">
				
			</view>
			<view style="flex-grow: 1;margin-left: 20rpx;margin-top: 20rpx;">
				<text>洛川大苹果</text>
			</view>
			<view style="margin-left: 20rpx;display: flex;flex-direction: column;margin-top: 20rpx;">
				<text style="font-size: 36rpx;color: red;">¥19.5</text>
				<text style="margin-top: 20rpx;color: gray;">X 10</text>
			</view>
		</view>
		<view style="display: flex;flex-direction: column;margin-top: 20rpx;">
			<text style="color: red;font-size: 36rpx;">总计：¥195</text>
			<text style="color: gray;margin-top: 10rpx;">2025-04-05 11:23:00</text>
		</view>
   	</view>
   </scroll-view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar.vue';

export default {
  components: {
    CustomNavbar
  },
  data () {
	  return {
		  
	  }
  },
  methods: {
	  toDetail() {
		uni.navigateTo({
			url:'/pages/order/orderDetail'
		})  
	  },
  }
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  // 总容器高度撑满屏幕
  height: 100%;
  // 使容器内元素使用flex布局
  display: flex;
  flex-direction: column;
}
.contentBox {
  /* 确保内容不被导航栏遮挡 */
  flex-grow: 1;
  height: 1px;
  margin-bottom: 20rpx;
}
.list-item {
	width: calc(100% - 100rpx);
	background-color: white;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 10rpx;
}
</style>